<template>
  <div class="panel">
    <!-- 左边区域 -->
    <div class="left-section">
      <div class="left-top-text">101信息窗口</div>
    </div>

    <!-- 右边区域 -->
    <div class="right-section">
      <!-- 上半部分 -->
      <div class="top-right">
        <div class="status-item">
          <span>润滑泵</span>
          <span :class="['status-dot', act.run ? 'green' : '']"></span>
        </div>
        <div class="status-item">
          <span>破碎机</span>
          <span :class="['status-dot', act.run ? 'green' : '']"></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { act } from "../websocket";
// 这里暂时不用逻辑，纯布局
</script>

<style scoped>
.panel {
  display: flex;
  width: 100%;
  height: 100%;

  background: rgba(0, 255, 255, 0.1);
  color: #0ff;
  border: 1px solid #0ff;
  border-radius: 12px;
  font-family: monospace;
  box-shadow: 0 0 15px #0ff;
  backdrop-filter: blur(5px);
  box-sizing: border-box;
  padding: 1em;
}

/* 左边 1/3 宽 */
.left-section {
  flex: 1; /* 1份 */
  position: relative;
  display: flex;
  align-items: flex-end; /* 垂直底部对齐 */
  justify-content: center; /* 水平居中 */
  padding-bottom: 1em;
}

/* 左边底部文本 */
.left-top-text {
  font-size: 1.3em; /* 字体变大，比如从0.8em调到1em */
  font-weight: bold; /* 加粗 */
  color: #e88d0d; /* 颜色 */
  white-space: nowrap;
  position: absolute;
  top: 0em; /* 距离顶部更近 */
  left: 150%;
  transform: translateX(-50%);
}

/* 底部文本 */
.left-bottom-text {
  font-size: 0.8em;
  white-space: nowrap;
  position: absolute;
  bottom: 0em;
  left: 50%;
  color: rgb(242, 255, 0);/* 颜色 */
  transform: translateX(-50%);
}
/* 右边 2/3 宽 */
.right-section {
  flex: 6; /* 2份 */
  display: flex;
  flex-direction: column;
  gap: 1em;
  padding-left: 1em;
}

/* 右上部分 - 水平放两个状态项 */
.top-right {
  display: flex;
  gap: 3em;
  margin-left: 5em;
}

/* 状态项文本+状态球 */
.status-item {
  display: flex;
  align-items: center;
  gap: 2em;
  font-size: 0.14em;
}

/* 状态球 */
.status-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: gray;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

/* 绿色状态 */
.status-dot.green {
  background: #0f0;
  box-shadow: 0 0 8px #0f0;
}

/* 红色状态 */
.status-dot.red {
  background: #f00;
  box-shadow: 0 0 8px #f00;
}

/* 包裹容器，带边框 */
.bottom-right-wrapper {
  border: 1px solid #0ff;
  border-radius: 8px;
  padding: 1em;
  /* 保持宽度和right-section一致 */
  flex: 1;
  background: rgba(0, 255, 255, 0.1);
}

/* 调整4参数为两行两列 */
.bottom-right {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1em;
}

/* 参数样式 */
.param {
  background: rgba(0, 255, 255, 0.2);
  border-radius: 8px;
  padding: 0.5em;
  text-align: center;
}
</style>
